<template>
    <div class="goodsInfo">
        <!-- 轮播图 -->
        <div class="goodsInfo2">
            <div class="lunbotu">
                <van-swipe :autoplay="3000" indicator-color="white">
                    <van-swipe-item v-for="(image, index) in lunbotu" :key="index">
                        <img :src="image" alt="">
                    </van-swipe-item>
                </van-swipe>
            </div>



            <div class="buy_box">
                <p>
                    {{goodsInfo.title}}
                </p>
                <hr>

                <p>
                    市场价：<span>{{goodsInfo.market_price}}</span>
                    销售价：<span>￥{{goodsInfo.sell_price}}</span>

                </p>
                <p><!-- 步进器，显示购买数量 -->
                    库存：{{goodsInfo.stock_quantity}} 购买数量：
                     <van-stepper v-model="buy_num" min="0" :max="goodsInfo.stock_quantity" style="display: inline;"/>
                    <p>添加时间：{{goodsInfo.add_time | dateFormat('YYYY-MM-DD')}}</p>
                </p>
                    <van-button type="info" size="large" @click="dialog.showDialog=!dialog.showDialog">查看信息</van-button>
                
               
            </div>
            <comment :id='id'></comment>
        </div>

            <!-- 点击查看信息时候，跳出来的商品信息弹窗 -->
            <van-dialog
                v-model="dialog.showDialog"
                :title="description.title"
                show-cancel-button
                :showCancelButton='dialog.showCancelButton'
                :closeOnClickOverlay='dialog.closeOnClickOverlay'
            >
                <div class="dialog">
                    <p v-html="description.content"></p>
                </div>
            </van-dialog>
            <!-- 下方的客服。购物车。加入购物车。立即购买 -->
            <van-goods-action>
                <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
                <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
                <van-goods-action-button type="warning" text="加入购物车" @click="add_to_car" />
                <van-goods-action-button type="danger" text="立即购买" @click="onClickButton" />
            </van-goods-action>

       

    </div>  
</template>
<script>
import {Toast} from 'mint-ui'
import comment from '../comment.vue'
import { Dialog } from 'vant'
export default {
    data(){
        return{
            dialog:{
                showDialog:false,
                showCancelButton:false,
                closeOnClickOverlay:true

            },
            id:this.$route.params.id,
            goodsInfo:[],
            lunbotu:[],
            buy_num:0,
            description:null
        }
    },
    methods:{
        change_showDialog(){this.showDialog=true;},
        onClickButton(){},
        onClickIcon(){},
        add_to_car(){
            if(this.buy_num!=0){
                var goods={//,手动拼接一个对象
                    cou:this.buy_num,
                    id:this.id,
                    title:this.goodsInfo.title,
                    sell_price:this.goodsInfo.sell_price,
                    thumb_path:this.lunbotu[0],
                    selected:false
                }//
                console.log("chuangrude shuju :"+goods.cou)
                this.$store.commit('add_to_car', goods);
                this.buy_num=0;
            }else{
                Toast({
                    message:"请先选择购买数量！"
                })
            }
            
        },
        get_lunbotu(){
            this.$axios.get('/api/getthumimages/'+this.id)
            .then(response=>{
                response.data.message.forEach(element => {
                    this.lunbotu.push(element.src);
                });
            }).catch(error=>{
                Toast({
                    message:'获取轮播图失败！'+error
                })
            })
        },
        get_goodsInfo(){
            this.$axios.get('/api/goods/getinfo/'+this.id)
            .then(response=>{
               this.goodsInfo=(response.data.message[0]);
                
            })
            .catch(error=>{
                Toast({
                    message:'请求错误'+error
                })
            })
        },
        get_description(){
            this.$axios.get('/api/goods/getdesc/'+this.id)
            .then(response=>{
               this.description=(response.data.message[0]);
              
            })
            .catch(error=>{
                Toast({
                    message:'请求错误'+error
                })
            })
        },
        scroll_to_top(){
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
            window.pageYOffset = 0;
        },
        
    },
    
    created(){
        this.get_goodsInfo();
        this.get_lunbotu();
        this.get_description();
    },
    mounted(){
        this.scroll_to_top();
    },
    components:{
         [Dialog.Component.name]: Dialog.Component,
        comment:comment
    },

   
}
</script>
<style  lang="scss" scoped>
$img_size:110px;
 .goodsInfo{
     margin: 0px;
     padding: 0px;
     width: 100%;
     height: 100%;
     margin-top: 50px;
     .goodsInfo2{
         margin-bottom: 50px;
         .lunbotu{
         width: 94%;
         margin: 3%;
         text-align: center;
         box-shadow: 0 0 3px #999;
        ::v-deep .van-swipe-item{
            height: 250px;
            width: 100%;
            padding: 3px;
            img{
                width: auto;
                height: 100%;
             
            }
        }
     }
     .buy_box{
         width: 94%;
         height: 250px;
         margin: 3%;
         text-align: left;
         padding: 5px;
         box-shadow: 0 0 3px #999;
         min-height: 100px;
         
         p:nth-of-type(1){
             color: lightskyblue;
             font-size: 20px;
             line-height: 25px;
             font-weight: 600;
         }
         p:nth-of-type(2){
             color: black;
             font-size: 15px;
             line-height: 20px;
            
             margin: 5px;
             span:nth-of-type(1){
                 text-decoration-line:line-through;
                 font-size: 13px; 
             }
             span:nth-of-type(2){
                 color: #FF2400;
                 font-weight: 1000px;
                 letter-spacing: 5px;
             }
         }
         hr{
             margin-top: 0px;
             margin-bottom: 0px;
         }
         
         
         
     }
     }
     ::v-deep .van-dialog {
                overflow-x:hidden;
                overflow: scroll;
                max-height: 80%;
        .dialog{
                
                img{
                    width: 80%;
                    height: auto;
                    margin-left: 10%;
                    margin-right:10%;
                }
            }
     }
  
     ::v-deep .van-stepper__input{
        width: 40px;
        height: 28px;;
        margin: 0px;
     }
     ::v-deep .van-goods-action{
         bottom: 56px;
     }
   
}

</style>